<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码编辑</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/topic_detail.css">
    <link rel="stylesheet" href="css/blog_mycomment.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <!-- 引入ace.js -->
    <script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.2.9/ext-language_tools.js"></script>

</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo.jpg" alt="">
    <span class="title">CL</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="/blog/blog_list.html">主页</a>
    <a href="/blog/myblog_list.html">个人博客列表页</a>
    <a href="/blog/blog_add.html">写博客</a>
    <a href="/blog/mydraft_list.html">草稿箱</a>
    <a href="javascript:logout()">注销</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧题目信息 -->
    <div class="container-left">
        <h2>QB1:翻转链表</h2>
        <div class="left_up">
            <button class="topic">题目</button>
            <button class="discuss">讨论</button>
        </div>
        <div class="left_mid">
            <div class="level">难度</div>
            <div class="pass">通过率</div>
        </div>
        <div class="topic-content">
            <h3>描述</h3>
            <div class="describe"></div>
            <div class="ask"></div>
            <h4>示例1</h4>
            <div class="example example1"></div>
            <h4>示例2</h4>
            <div class="example example2"></div>
        </div>
    </div>
    <!-- 右侧代码编辑-->
    <div class="container-right">
        <div>
            <!-- 将页面编辑框外面套一层 div, id 设为 editor, 并且一定要设置 min-height 属性. -->
            <div id="editor" style="min-height:800px">
                <textarea style="width: 100%; height: 200px"></textarea>
            </div>
            <div class="right_down">
                <button class="runResult">执行结果</button>
                <button class="input">自测输入</button>
                <button class="log">提交记录</button>
                <div class="kongbai"></div>
                <button class="run">自测运行</button>
                <button class="save" onclick="saveSubmit()" style="width: 130px;">保存并提交</button>
            </div>
        </div>
    </div>
</div>

<script>
   
     function initAce() {
        // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
        let editor = ace.edit("editor");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/java");
        editor.resize();
        document.getElementById('editor').style.fontSize = '20px';

        return editor;
    }
    //获取刚刚初始化好的编译器
    let editor = initAce();

    // 由于ace.js会重新绘制页面，导致之前弄得textarea没了。因此需要换种方式



    //初始化代码编辑框 + 题目详情
    function initCodeEdit() {
        jQuery.ajax({
            url:"/topic/topicInfo",
            type:"POST",
            headers: {
                Authorization: localStorage.getItem("Authorization")
            },
            data:{"title":"翻转链表7"},
            success:function(result) {
                if(result != null && result.code == 200) {
                    // 将代码设置到编译器中
                    editor.setValue(result.data.topic.templateCode);
                    //题目详情

                    jQuery(".describe").html('<pre>'+result.data.list1+'</pre>');
                    jQuery(".ask").html('<pre>'+result.data.list2+'</pre>');
                    jQuery(".example1").html('<pre>'+result.data.list3+'</pre>');
                    jQuery(".example2").html('<pre>'+result.data.list4+'</pre>');
                } else {
                    jQuery(".describe").text("题目加载失败，请重试！");
                }
            }
        });
    }
    initCodeEdit();

    //代码提交运行
    function saveSubmit() {
        jQuery.ajax({
            url:"/topic/saveSubmit",
            type:"POST",                    // 获取编译器中得代码
            data:{"topicTitle":"翻转链表7","code":editor.getValue()},
            success:function(result) {
                if(result != null && result.code == 200 && result.data.length > 0) {
                    alert(result.data);
                } else {
                    alert(result.msg);
                }
            }
        })
    }
    
</script>
</body>

</html>
